<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet/less" type="text/css" href="./css/iconfonts.less"/>
    <link rel="stylesheet/less" type="text/css" href="./css/public_css.less"/>
    <script src="./js/app.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
    <script type="text/javascript" charset="utf-8">
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
    </script>
</head>
<body>
<nav class="mui-bar mui-bar-tab index_nav_top" style="padding-top: 5px;">
	<a class="mui-tab-item mui-active" href="#dynamic">
		<span class="mui-icon iconfont icon-dongtai"><span class="mui-badge">9</span></span>
		<span class="mui-tab-label">动态</span>
	</a>
	<a class="mui-tab-item" href="#msgBox">
		<span class="mui-icon iconfont icon-xiaoxi"></span>
		<span class="mui-tab-label">消息</span>
	</a>
	<a class="mui-tab-item" href="#CRM_column">
		<span class="mui-icon iconfont icon-crm"></span>
		<span class="mui-tab-label">CRM</span>
	</a>
	<a class="mui-tab-item" href="#meUser">
		<span class="mui-icon iconfont icon-wode"></span>
		<span class="mui-tab-label">我的</span>
	</a>
</nav>
<div class="mui-content" id="apps">
	<!--动态-->
	<div id="dynamic" class="mui-control-content mui-active">
		<header class="mui-bar mui-bar-nav" id="edit">
			<h1 class="mui-title">最新动态</h1>
			<a href="#EditInfo" class="mui-icon iconfont icon-tag27fuben mui-pull-right" style="color:#8a8a8a"></a>
		</header>
		<div class="xuanfu_dongtai">
				<div>全部</div>
				<div>客户</div>
				<div>商机</div>
				<div>签到</div>
				<div>日志</div>
			</div>
		<div class="mui-content dongtai" style="margin-top: 30px;">
			<ul class="mui-table-view msgbox_list">
				<li class="mui-table-view-cell mui-media" v-for="dongtai in dynamic">
				    <a href="javascript:;">
					    <img class="mui-media-object mui-pull-left" :src="dongtai.user_img">
				         <div class="mui-media-body">
				         	<p>{{dongtai.user_name}}<span class="mui-pull-right">{{dongtai.user_department}}</span></p>
				            <p class="mui-ellipsis">{{dongtai.user_time}}</p>
				        </div>
				        <p class="dongtai_list_info"><span>客户名称:</span><span>{{dongtai.Customer_name}}</span></p>
				    	<p class="dongtai_list_info"><span>客户来源:</span><span>{{dongtai.Customer_source}}</span></p>
				    </a>
				</li>
				
			</ul>
		</div>
	</div>
	<!--消息-->
	<div id="msgBox" class="mui-control-content">
		<header class="mui-bar mui-bar-nav" id="edit">
			<h1 class="mui-title">消息</h1>
			<a href="#" class="mui-icon iconfont icon-renyuanzengjia mui-pull-right" style="color:#8a8a8a"></a>
		</header>
		<div class="mui-content">
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" href="#">
							<span v-if="msg.Journal != ''" class="mui-badge msgbox_info">{{msg.Journal}}</span>
							<span class="mui-icon iconfont icon-gonggao columnList2" style="background: #5bb4da;"></span><span class="msg_list_text">系统日志</span>
						</a>
					</li>
					<!--<li class="mui-table-view-cell">
						<a class="mui-navigate-right" href="#">
							<span v-if="msg.comments != ''" class="mui-badge msgbox_info">{{msg.comments}}</span>
							<span class="mui-icon iconfont icon-comment columnList2" style="background: #ffa200;"></span><span class="msg_list_text">评论</span>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" href="#">
							<span v-if="msg.systemInfo != ''" class="mui-badge msgbox_info">{{msg.systemInfo}}</span>
							<span class="mui-icon iconfont icon-xitongxiaoxi columnList2" style="background: #35b87f;"></span><span class="msg_list_text">系统消息</span>
						</a>
					</li>-->
				</ul>
				<p>
					<ul class="mui-table-view msgbox_list">
					    <li class="mui-table-view-cell mui-media">
					        <a href="./ChatMsg.html" target="_blank">
					            <img class="mui-media-object mui-pull-left" src="./images/userLogo/1.jpg">
					            <div class="mui-media-body">
					            	<p>雪雪004 <span class="mui-pull-right">2017年09月11日 15:00</span></p>
					                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
					            </div>
					        </a>
					    </li>
					    <li class="mui-table-view-cell mui-media">
					        <a href="./ChatMsg.html" target="_blank">
					            <img class="mui-media-object mui-pull-left" src="./images/userLogo/2.jpg">
					            <div class="mui-media-body">
					                <p>jim哥 <span class="mui-pull-right">2017年09月11日 14:00</span></p>
					                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
					            </div>
					        </a>
					    </li>
					    <li class="mui-table-view-cell mui-media">
					        <a href="./ChatMsg.html" target="_blank">
					            <img class="mui-media-object mui-pull-left" src="./images/userLogo/3.jpg">
					            <div class="mui-media-body">
					             	<p>fay <span class="mui-pull-right">2017年09月11日 15:30</span></p>
					                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
					            </div>
					        </a>
					    </li>
					    <li class="mui-table-view-cell mui-media">
					        <a href="./ChatMsg.html" target="_blank">
					            <img class="mui-media-object mui-pull-left" src="./images/userLogo/3.jpg">
					            <div class="mui-media-body">
					             	<p>fay <span class="mui-pull-right">2017年09月11日 15:30</span></p>
					                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
					            </div>
					        </a>
					    </li>
					    <li class="mui-table-view-cell mui-media">
					        <a href="./ChatMsg.html" target="_blank">
					            <img class="mui-media-object mui-pull-left" src="./images/userLogo/3.jpg">
					            <div class="mui-media-body">
					             	<p>fay <span class="mui-pull-right">2017年09月11日 15:30</span></p>
					                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
					            </div>
					        </a>
					    </li>
					    <li class="mui-table-view-cell mui-media">
					        <a href="./ChatMsg.html" target="_blank">
					            <img class="mui-media-object mui-pull-left" src="./images/userLogo/3.jpg">
					            <div class="mui-media-body">
					             	<p>fay <span class="mui-pull-right">2017年09月11日 15:30</span></p>
					                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
					            </div>
					        </a>
					    </li>
					    <li class="mui-table-view-cell mui-media">
					        <a href="./ChatMsg.html" target="_blank">
					            <img class="mui-media-object mui-pull-left" src="./images/userLogo/3.jpg">
					            <div class="mui-media-body">
					             	<p>fay <span class="mui-pull-right">2017年09月11日 15:30</span></p>
					                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
					            </div>
					        </a>
					    </li>
					    <li class="mui-table-view-cell mui-media">
					        <a href="./ChatMsg.html" target="_blank">
					            <img class="mui-media-object mui-pull-left" src="./images/userLogo/3.jpg">
					            <div class="mui-media-body">
					             	<p>fay <span class="mui-pull-right">2017年09月11日 15:30</span></p>
					                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
					            </div>
					        </a>
					    </li>
					    <li class="mui-table-view-cell mui-media">
					        <a href="./ChatMsg.html" target="_blank">
					            <img class="mui-media-object mui-pull-left" src="./images/userLogo/3.jpg">
					            <div class="mui-media-body">
					             	<p>fay <span class="mui-pull-right">2017年09月11日 15:30</span></p>
					                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
					            </div>
					        </a>
					    </li>
					</ul>
				</p>
		</div>
	</div>
	<!--CRM-->
	<div id="CRM_column" class="mui-control-content">
		<header class="mui-bar mui-bar-nav" id="edit">
			<h1 class="mui-title">CRM</h1>
		</header>
		<div class="mui-content">
			<p>
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" href="#">
							<span class="mui-icon iconfont icon-cus columnList" style="background: #f26d5f;"></span>学员
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" href="#">
							<span class="mui-icon iconfont icon-tasks columnList" style="background: #18b4ed;"></span>任务
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" href="#"> 
							<span class="mui-icon iconfont icon-richeng columnList" style="background: #ff5722;"></span>日程
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" href="#"> 
							<span class="mui-icon iconfont icon-jiaowu columnList" style="background: #efa839;"></span>教务
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" href="./contact_list.html" target="_blank">
							<span class="mui-icon iconfont icon-lianxiren columnList" style="background: #ff9900;"></span>通讯录
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" href="./work.html" target="_blank">
							<span class="mui-icon iconfont icon-icon columnList" style="background: #5bb4da;"></span>工作日志
						</a>
					</li>
				</ul>
			</p>
		</div>
	</div>
	<!--个人中心-->
	<div id="meUser" class="mui-control-content">
		<header class="mui-bar mui-bar-nav mui-table-view mui-table-view-chevron" id="edit">
			<h1 class="mui-title">个人中心</h1>
			<a href="#EditInfo" class="mui-icon iconfont icon-bianji mui-pull-right"></a>
		</header>
		<div class="mui-content">
			<div style="width:100%;padding:30px 0px;background: #FFFFFF;">
				<img src="./images/userLogo/5.jpg" class="user-img" style="width:30%;display: block;margin: auto;"/>
			</div>
			<p style="padding:10px;margin-bottom: 0px;">
				基本信息
			</p>
			<form id="login-form" class="mui-input-group">
				<div class="mui-input-row user_info">
					<label>英文名</label>
					<input disabled id="user_name" type="text" class="mui-input-clear mui-input user_infobtn" placeholder="请输入英文名" value="Zeb" data-input-clear="1"><span class="mui-icon mui-icon-clear mui-hidden"></span>
				</div>
				<div class="mui-input-row user_info">
					<label>邮箱</label>
					<input disabled id="user_email" type="text" class="mui-input-clear mui-input user_infobtn" placeholder="请输入邮箱" value="2279454823@qq.com" data-input-clear="2"><span class="mui-icon mui-icon-clear mui-hidden"></span>
				</div>
				<div class="mui-input-row user_info">
					<label>电话</label>
					<input disabled id="user_tels" type="text" class="mui-input-clear mui-input user_infobtn" placeholder="请输入座机号" value="无" data-input-clear="2"><span class="mui-icon mui-icon-clear mui-hidden"></span>
				</div>
				<div class="mui-input-row user_info">
					<label>手机号</label>
					<input disabled id="user_tel" type="text" class="mui-input-clear mui-input user_infobtn" placeholder="请输入手机号" value="1871104613" data-input-clear="2"><span class="mui-icon mui-icon-clear mui-hidden"></span>
				</div>
			</form>
			
		</div>
	</div>
</div>
<script src="https://cdn.bootcss.com/less.js/3.0.0-pre.4/less.min.js"></script>
<script>
	var app = new Vue({
		el:"#apps",
		data: {
			dynamic:[
						{
							"user_img":"./images/userLogo/1.jpg",
							"user_name":"雪雪004",
							"user_department":"TMK",
							"user_time":"2017年09月11日 15:00",
							"Customer_name":"惠泽园",
							"Customer_source":"百度渠道"
						},
						{
							"user_img":"./images/userLogo/1.jpg",
							"user_name":"雪雪004",
							"user_department":"TMK",
							"user_time":"2017年09月11日 15:00",
							"Customer_name":"惠泽园",
							"Customer_source":"百度渠道"
						},
						{
							"user_img":"./images/userLogo/1.jpg",
							"user_name":"雪雪004",
							"user_department":"TMK",
							"user_time":"2017年09月11日 15:00",
							"Customer_name":"惠泽园",
							"Customer_source":"百度渠道"
						},
						{
							"user_img":"./images/userLogo/1.jpg",
							"user_name":"雪雪004",
							"user_department":"TMK",
							"user_time":"2017年09月11日 15:00",
							"Customer_name":"惠泽园",
							"Customer_source":"百度渠道"
						},
						{
							"user_img":"./images/userLogo/1.jpg",
							"user_name":"雪雪004",
							"user_department":"TMK",
							"user_time":"2017年09月11日 15:00",
							"Customer_name":"惠泽园",
							"Customer_source":"百度渠道"
						},
						{
							"user_img":"./images/userLogo/1.jpg",
							"user_name":"雪雪004",
							"user_department":"TMK",
							"user_time":"2017年09月11日 15:00",
							"Customer_name":"惠泽园",
							"Customer_source":"百度渠道"
						},
						{
							"user_img":"./images/userLogo/1.jpg",
							"user_name":"雪雪004",
							"user_department":"TMK",
							"user_time":"2017年09月11日 15:00",
							"Customer_name":"惠泽园",
							"Customer_source":"百度渠道"
						},
						{
							"user_img":"./images/userLogo/1.jpg",
							"user_name":"雪雪004",
							"user_department":"TMK",
							"user_time":"2017年09月11日 15:00",
							"Customer_name":"惠泽园",
							"Customer_source":"百度渠道"
						},
						{
							"user_img":"./images/userLogo/1.jpg",
							"user_name":"雪雪004",
							"user_department":"TMK",
							"user_time":"2017年09月11日 15:00",
							"Customer_name":"惠泽园",
							"Customer_source":"百度渠道"
						},
						{
							"user_img":"./images/userLogo/1.jpg",
							"user_name":"雪雪004",
							"user_department":"TMK",
							"user_time":"2017年09月11日 15:00",
							"Customer_name":"惠泽园",
							"Customer_source":"百度渠道"
						}
					],
			msg:{
				Journal:"5"
			}
		},
		methods: {
			p_dynamic:function(current){
				//动态	
			},
			p_msg:function(){
				//消息
				//请求工作日志
				//请求评论
				//请求未读的系统消息
			}
		},
		created:function(){
			//准备完成后部署数据及第一次展示的数据;
			this.p_dynamic();//动态数据
			
		}
	})
</script>
</html>